<template>
  <el-dialog title="用户详情" :close-on-click-modal="false" @close="close" :visible.sync="visible" size="auto">
    <el-row v-loading="loading" style="width: 600px">
      <el-col :span="9">
        <dl class="mainSide__userpic">
          <!--<dt><img :src="$imgUrl(detail.icon)"></dt>-->
          <dt><img src="../../../../../../assets/images/user-space.png"></dt>
          <dd style="font-size: 16px">{{ detail.realName }}</dd>
        </dl>
      </el-col>
      <el-col :span="15" class="list-detail">
        <p><label>用户名：</label>{{ detail.userName }}</p>
        <p><label>生日：</label>{{ detail.birthday }}</p>
        <p><label>手机：</label>{{ detail.mobile }}</p>
        <p><label>email：</label>{{ detail.email }}</p>
        <p><label>QQ：</label>{{ detail.qq }}</p>
        <p><label>微信：</label>{{ detail.wx }}</p>
        <p><label>部门：</label>{{ departments }}</p>
        <p><label>角色：</label>{{ roleNames }}</p>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="visible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'SDialogDetail',
  props: {
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      roleNames: '',
      detail: {
        id: this.data.detail.id,
        icon: this.data.detail.icon,
        userName: this.data.detail.userName,
        realName: this.data.detail.realName,
        birthday: this.data.detail.birthday,
        joinDate: this.data.detail.joinDate,
        mobile: this.data.detail.mobile,
        email: this.data.detail.email,
        qq: this.data.detail.qq,
        wx: this.data.detail.wx,
        positionLevel: this.data.detail.positionLevel,
        department_name: this.data.detail.department_name,
        identityCode: this.data.detail.identityCode
      },
      departments: '',
      loading: false,
      visible: true
    }
  },
  computed: {
    ...mapState('options', ['options']),
    positionLevel () {
      const positionLevels = this.options.PositionLevel
      for (let {name, value} of positionLevels) {
        if (value === this.detail.positionLevel) {
          return name
        }
      }
      return ''
    }
  },
  created () {
    this.$service.options.setOptions('PositionLevel')
    this.$service.system.detailUser({id: this.data.detail.id}).then(res => {
      const data = res.data
      Object.assign(this.detail, this.$lodash.pick(data.userInfo, ['id', 'icon', 'userName', 'realName', 'birthday', 'joinDate', 'mobile', 'email', 'qq', 'wx', 'positionLevel', 'department_name', 'identityCode']))
      const departments = []
      for (let {departmentName} of data.departments) {
        departments.push(departmentName)
      }
      this.departments = departments.join(',')

      const roleNames = []
      for (let {roleName} of data.roleNames) {
        roleNames.push(roleName)
      }
      this.roleNames = roleNames.join(',')
    })
  },
  methods: {
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style>
.list-detail label {
  width: 60px;
  display: inline-block;
  margin-right: 5px;
  color: #999;
}
</style>
